<template>

  <div class="box" :class="{ boxfixed }">
    
    <h3>信息</h3>
  
    <van-tabs title-class="tabs" title-active-color='#ff6262' line-height='6px' line-width='6px' v-model="active" sticky >
    
      <van-tab  title="聊天"><Chat :total="total" :chatList='chatList' :fetchData="fetchChatList"/></van-tab>
      <van-tab title="收到的赞"><Like :likeList="likeList" :fetchlike='fetchlikeList' /></van-tab>
      <van-tab title="回复我的"><Answer :answerList="likeList"/></van-tab>
      <van-tab title="关注我的" ><Follow :followList="likeList" :fetchlike='fetchlikeList'/></van-tab>
      <van-tab title="系统消息"><Message :systemList="systemList"/>
      </van-tab>
    </van-tabs>
    
  </div>
</template>

<script>
import { chatListApi ,likeListApi,systemListApi} from "@/api/newsApi";
import Chat from './chat'
import Like from './like'
import Follow from './follow'
import Answer from './answer'
import Message from './message'


import Vue from 'vue';



export default {
   components: {
    'Chat':Chat,
    'Like':Like,
    'Answer':Answer,
    'Follow':Follow,
    'Message':Message,
    


  } ,
  data() {
    return {
        active: 0,
        boxfixed: false,
        chatList: [],
        likeList:[],
        systemList:[],
        
        total:0
    };
  },
  methods: {
    async fetchChatList(page,pageSize) {
      const data = await chatListApi({page,pageSize});
      // console.log(data, "data");
      this.chatList = this.chatList.concat(data.data.data);
      this.total = data.data.total
    },
    async fetchlikeList() {
      const data = await likeListApi();
      // console.log(data.data.data, "data");
      this.likeList = this.likeList.concat(data.data.data);
      // console.log(this.likeList)
      
    },
    async fetchmsystemList() {
      const data = await systemListApi();
      console.log(data.data.data, "data");
      this.systemList = this.systemList.concat(data.data.data);
      
      
    },

    // onScroll(){
    //   // 滚动条的高度大于50px，就吸顶
    //   if (document.documentElement.scrollTop > 50) {
    //     this.boxfixed = true
    //   } else {
    //     this.boxfixed = false
    //   }
    //  }
    
  },
  async mounted() {
    this.fetchChatList(1,10);
   
    this.fetchlikeList()
    this.fetchmsystemList()
    // console.log(await likeListApi())
    
   
  },
  // mounted() {
  //   window.addEventListener('scroll', this.onScroll)
  // },
  // beforeDestroy() {
  //   // 它要销毁
  //   window.removeEventListener('scroll', this.onScroll)
  // }
};
</script>

<style lang="scss" scoped>
h3{
    margin-bottom: 0px;
    font-weight: 400;
    font-size: 25px;
    margin-left: 25px;
}
:deep(.van-tabs__content){
  margin-top: 20px;
}


</style>